<template>
  <div class="app-container">
    <el-form ref="form" label-width="120px" label-position="left">
      <el-row>
        <h3>基本信息</h3>
        <el-col :span="12">
          <el-form-item label="头像">
            <el-avatar :src="avatarUrl"></el-avatar>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称">
            <span>{{userInfo.nickName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <span>{{userInfo.mobile}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册时间">
            <span>{{userInfo.createTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最后登陆时间">
            <span>{{userInfo.lastLoginTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单量">
            <span>{{userInfo.orderCount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购物车数量">
            <span>{{userInfo.cartCount}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <h3>收货地址</h3>
        <p v-for="item in addressList" :key="item.id">
          {{item.name}}&nbsp;&nbsp; {{item.tel}}&nbsp;&nbsp;{{item.province}}{{item.city}}{{item.district}}{{item.addressDetail}}
        </p>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { getShopUser } from "@/api/shop/shopUser";
  import { listShopAddress } from "@/api/shop/shopAddress";

  export default {
    data() {
      return {
        userInfo: {},
        idUser: '',
        addressList:[],
        avatarUrl:''
      }
    },
    created() {
      this.idUser = this.$route.query.id
      this.init()
    },
    methods: {
      init() {
        this.fetchData()
      },
      fetchData() {
        if (this.idUser) {
          getShopUser(this.idUser).then(response => {
            this.userInfo = response.data;
            if(this.userInfo.avatar!=='') {
            }
          });
          listShopAddress({
            page: 1,
            limit: 20,
            idUser: this.idUser
          }).then(response => {
            this.addressList = response.rows;
          });
        }
      }
    }
  }
</script>

<style scoped>

</style>
